<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { apiGet, apiPost } from '@/request/apiUtils';
import moment from 'moment';
const formatDate = (d: any) => moment(d).format('YYYY-MM-DD');
const initQuery = {
    describe: null,
};
const { value: state } = ref({
    loading: false,
    tableData: [] as TObj[],
    total: 0,
    pageSize: 20,
    currentPage: 1,
    queryData: { ...initQuery },
    statistics: { demand_time_total: 0, test_time_total: 0 }
});

const fetchData = async (page = state.currentPage, size = state.pageSize) => {
    state.loading = true;
    try {
        const apiUrl = '/monitor';
        const { test_date, launch_time } = state.queryData;
        const params: TObj = {
            page,
            size,
            ...state.queryData,
        };
        delete params.test_date
        delete params.launch_time;
        const response: TObj = await apiGet(apiUrl, params); // 假设你有一个 API 端点返回数据
        state.tableData = response?.results || [];
        state.total = response?.count || 0;
        state.statistics.demand_time_total = response?.demand_time_total || 0;
        state.statistics.test_time_total = response?.test_time_total || 0;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
    state.loading = false;
};

// 页数改变
const handleSizeChange = (val: number) => {
    state.pageSize = val;
    fetchData(state.currentPage, val);
};
const handleCurrentChange = (val: number) => {
    state.currentPage = val;
    fetchData(val, state.pageSize);
};


// 查询
const handleSearch = () => {
    fetchData()
};
onMounted(() => {
    fetchData();
});

</script>

<template class="home-wrap">
    <div class="home-search">
        <div class="home-search-inner">
            <el-input v-model="state.queryData.describe" placeholder="请输入场景描述" class="width200" />
            <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
    </div>
    <el-table :data="state.tableData" border style="width: 100%" class="home-table" v-loading="state.loading"
        :header-cell-style="{ color: '#000', backgroundColor: '#61c5fc' }" :row-style="{ backgroundColor: '#cce4fa' }">
        <el-table-column prop="id" label="id" width="80" fixed="left" />
        <el-table-column prop="version" label="项目" fixed="left" />
        <el-table-column prop="module" label="模块" />
        <el-table-column prop="describe" label="场景描述" width="350" />
        <el-table-column prop="monitoring_frequency" label="监控频次" width="130" />
        <el-table-column prop="finish_schedule" label="进度">
            <template v-slot="scope">
                <span>{{ [scope.row.finish_schedule] + '%' }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="K8s_name" label="k8s name" width="230" />
        <el-table-column prop="pod_name" label="pod" />
        <el-table-column prop="tester" label="测试人员" />
        <el-table-column prop="finish_time" label="完成日期" />
    </el-table>
    <div class="example-pagination-block">
        <span class="m-r-5 font-12">共 {{ state.total }}</span>
        <el-pagination v-model:currentPage="state.currentPage" v-model:page-size="state.pageSize"
            :page-sizes="[20, 50, 100, 200]" :small="true" :disabled="false" :background="false"
            layout="sizes, prev, pager, next" :total="state.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<style scoped>
.home-wrap {
    position: relative;
}

.home-search {
    height: 50px;
}

.sta-wrap {
    display: flex;
    height: 20px;
    align-items: center;
    color: blue;
    font-size: 14px;
}

.home-search-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.home-table {
    height: calc(100vh - 180px);
    background-color: #3c00ff0d;
}

.home-table .el-table__body {
    background-color: #f5f5f5;
}

.example-pagination-block {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: end;
}
</style>
